<template>
  <div class="listBox">
    <div class="banner">
      <img :src="src">
      <div class="timeline">
        <div class="timeBox">
          距离秒杀结束{{ countDownList }}
          <!-- <ul>
            <li>
              <div>10:00</div>
              <div>已开抢</div>
            </li>
            <li class="active">
              <div>11:00</div>
              <div>即将开始</div>
            </li>
            <li>
              <div>12:00</div>
              <div>即将开始</div>
            </li>
            <li>
              <div>14:00</div>
              <div>即将开始</div>
            </li>
            <li>
              <div>16:00</div>
              <div>即将开始</div>
            </li>
            <li>
              <div>18:00</div>
              <div>即将开始</div>
            </li>
            <li>
              <div>20:00</div>
              <div>即将开始</div>
            </li>
            <li>
              <div>22:00</div>
              <div>即将开始</div>
            </li>
          </ul> -->
        </div>
      </div>
    </div>
    <div class="content">
      <img
        src="../../assets/img/activityBox.png"
        alt=""
        class="topicImg"
      >
      <div class="listBoxs">
        <div
          v-for="item in goodData"
          :key="item.id"
          class="list"
          @click="goBuyItem(item)"
        >
          <img
            :src="item.defaultAlbum"
            alt=""
          >
          <div class="rightBox">
            <div class="title">
              {{ item.pName }}
            </div>
            <div class="desc">
              {{ item.cSellingPoint }}
            </div>
            <div class="nums">
              <div class="progress">
                <div
                  class="precent"
                  :style="lineProgress(item)"
                />
              </div>
              <div>还剩{{ item.lInventoryCount }}件</div>
            </div>
            <div class="price">
              <span class="xianshigou">限时购</span>
              <span class="old">￥{{ item.fSalePrice }}</span>
              <span class="new">￥{{ item.pfMarkPrice }}</span>
            </div>
            <div class="btns">
              开抢提醒
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import imgUrl from '../../assets/img/activityBanner.png';
export default {
	data() {
		return {
			src: imgUrl,
			countDownList: '00天00时00分00秒',
			actEndTime: '2022-01-01 00:00:00',
			id: '',
			goodData: [],
			timer:null
		};
	},
	created() {},
	mounted() {
		this.id = this.$route.query.id;
		this.actEndTime = this.$route.query.endDate;
		console.log(this.actEndTime);
		this.countDown();
		if (this.id != '' || this.id != undefined) {
			this.getPriceProductList();
		}
	},
	methods: {
		goBuyItem(item){
			this.$router.push({
				path:"/fruit/detail",
				query:{"id":item.pid}
			})
		},
		//进度条
		lineProgress(item){
			const style = {}
			style.width = (Math.round((1 - item.iSales / (item.iSales + item.lInventoryCount)) * 10000) / 100).toFixed(0)  * 12.38 /100 +'rem';
			return style
		},
		getPriceProductList() {
			let params = {
				queryCondition: {
					order: [{ fieldname: 'iOrder', direction: 'asc' }],
					pageindex: 1,
					pagesize: 12,
					where: [{ fieldname: 'promotionActivityId', valuefrom: 'PP' + this.id }]
				}
			};
			this.$api.home.getProductList(params).then(res => {
				// 执行某些操作
				if (res.code == 200) {
					console.log(res.data.data);
					this.goodData = res.data.data;
				}
			});
		},
		timeFormat(param) {
			return param < 10 ? '0' + param : param;
		},
		countDown() {
			clearInterval(this.timer);
			// var starttime = new Date(this.seckill[0].pStartDate.replace(/-/g, "/")) / 1000;
			var nowDate = Math.round(new Date() / 1000); // 当前时间
			//var endtime = Number(this.initActiveMsgObj.end_time); 
			var endtime = new Date(this.actEndTime.replace(/-/g, "/")) / 1000;
			// endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
			if (endtime < nowDate) {
				return
			}
						
						
			var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
			//天数
			var days = Math.floor(totalSeconds / (60 * 60 * 24));
			//取模（余数）
			var modulo = totalSeconds % (60 * 60 * 24);
			//小时数
			var hours = Math.floor(modulo / (60 * 60));
			hours = hours < 10 ? ('0' + hours) : hours;
			modulo = modulo % (60 * 60);
			//分钟
			var minutes = Math.floor(modulo / 60);
			minutes = minutes < 10 ? '0' + minutes : minutes;
			//秒
			var seconds = modulo % 60;
			seconds = seconds < 10 ? '0' + seconds : seconds;
			//输出到页面
			// this.times = hours + ':' + minutes + ':' + seconds;
			this.countDownList = days + '天' + hours + '时' + minutes + '分' + seconds + '秒';
			//if(totalSeconds <= 0){
			if (totalSeconds <= 60) {
				clearInterval(this.timer);
				// window.location.reload()
			} else {
				this.timer = setInterval(this.countDown, 1000);
			}
				
		}
	}
};
</script>

<style scoped lang="scss">
.listBox {
	.banner {
		height: 36.94rem;
		width: 100%;
		position: relative;
		img {
			height: 36.94rem;
			width: 100%;
		}
		.timeline {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;

			height: 5.88rem;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			.timeBox {
				padding: 0 16.19rem;
				text-align: center;
				line-height: 5.88rem;
				ul {
					display: flex;
					flex-direction: row;

					li {
						display: flex;
						flex-direction: column;
						// align-items: center;
						justify-content: center;
						width: 7.38rem;
						height: 5.88rem;
						padding-left: 2.5rem;
						&.active {
							background: #f34070;
						}
						> div {
							&:last-child {
								padding-top: 0.82rem;
							}
						}
					}
				}
			}
		}
	}
	.content {
		padding: 0 16.19rem;
		.topicImg {
			width: 100%;
			height: 33.75rem;
			margin-top: 1.88rem;
			margin-bottom: 1.25rem;
		}
		.listBoxs {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			.list {
				width: 37rem;
				height: 11.19rem;
				padding: 3.07rem 2.32rem;
				background: #ffffff;
				margin-bottom: 1.25rem;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				// margin-right: 1.13rem;
				// &:nth-child(2n) {
				// 	margin-right: 0;
				img {
					margin-right: 3.44rem;
					object-fit: contain;
					width: 12rem;
					height: 12rem;
				}

				.rightBox {
					.title {
						font-size: 1.13rem;
						color: #333;
						padding-bottom: 1.06rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
					}
					.desc {
						font-size: 0.88rem;
						color: #666666;
						padding-bottom: 1.06rem;
					}
					.nums {
						font-size: 0.88rem;
						color: #999999;
						display: flex;
						flex-direction: row;
						padding-bottom: 1.06rem;
						.progress {
							width: 12.38rem;
							height: 0.69rem;
							background: #ffffff;
							border: 0.06rem solid #49c1af;
							border-radius: 0.34rem;
							position: relative;
							margin-right: 0.75rem;
							.precent {
								background: #56d2bf;
								opacity: 0.32;
								width: 0;
								transition: all 1s ease-in-out;
								height: 0.69rem;
								border-radius: 0rem;
							}
						}
					}
					.price {
						padding-bottom: 1.06rem;
						.xianshigou {
							color: #32b2a1;
							font-size: 1rem;
						}
						.old {
							font-size: 2rem;
							color: #f0406f;
						}
						.new {
							font-size: 0.88rem;
							color: #959595;
						}
					}
					.btns {
						width: 9.06rem;
						height: 2.88rem;
						background: #f0406f;
						border-radius: 2rem;
						line-height: 2.88rem;
						text-align: center;
						color: #fff;
						font-size: 1rem;
						cursor: pointer;
						&:hover {
							opacity: 0.7;
						}
					}
				}
			}
		}
	}
}
</style>
